<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>


    <!-- 富文本编辑器 -->
    <link rel="stylesheet" href="/plugins/kindeditor/themes/default/default.css"/>
    <script charset="utf-8" src="/plugins/kindeditor/kindeditor-min.js"></script>
    <script charset="utf-8" src="/plugins/kindeditor/lang/zh_CN.js"></script>

    <!--引入bootstrap-fileinput-->
    <link rel="stylesheet" type="text/css" href="/js/bootstrap-fileinput/css/fileinput.css"/>
    <script type="text/javascript" src="/js/bootstrap-fileinput/js/fileinput.js"></script>
    <script type="text/javascript" src="/js/bootstrap-fileinput/js/locales/zh.js"></script>

</head>
<script type="text/javascript">
    $(function () {
        selectPid();
        upload();
        $("[name=myFile]").on("fileuploaded", function (event, data, previewid, index) {
            var filename = data.response.data;
            $("[name=newsImg]").val(filename);
        })
    })

    function selectPid() {
        var id = $("#getId").val()
        if (id == '') {
            id = 0
        }
        $.ajax({
            url: "/seller/getGoods",
            type: "post",
            dataType: "json",
            data: {pid: id},
            async: true,
            success: function (result) {
                if (result.code == 10000) {
                    var list = result.data
                    var str = ""
                    for (var i = 0; i < list.length; i++) {
                        str += '<option value="' + list[i].id + '">' + list[i].name + '</option>'
                    }
                }
                $("#one").html(str)
            },
            error: function (result) {
                alert("系统错误,请稍后再试");
            }
        })
    }

    function selectPidd(obj) {
        $.ajax({
            url: "/seller/getGoods",
            type: "post",
            dataType: "json",
            data: {pid: obj},
            async: true,
            success: function (result) {
                console.log(result.data)
                if (result.code == 10000) {
                    var list = result.data
                    var str = ""
                    for (var i = 0; i < list.length; i++) {
                        str += '<option value="' + list[i].id + '">' + list[i].name + '</option>'
                    }
                }
                $("#two").html(str)
            },
            error: function (result) {
                alert("系统错误,请稍后再试");
            }
        })
    }

    function selectPiddd(obj) {
        $.ajax({
            url: "/seller/getGoods",
            type: "post",
            dataType: "json",
            data: {pid: obj},
            async: true,
            success: function (result) {
                console.log(result.data)
                if (result.code == 10000) {
                    var list = result.data
                    var str = ""
                    for (var i = 0; i < list.length; i++) {
                        str += '<option value="' + list[i].typeId + '">' + list[i].name + '</option>'
                        $("#tree").val(list[i].id)
                    }
                }
                $("#three").html(str)
            },
            error: function (result) {
                alert("系统错误,请稍后再试");
            }
        })
    }

    function selectAll(obj) {
        $("#four").val(obj)
        $.ajax({
            url: "/seller/getGoodsType",
            type: "post",
            dataType: "json",
            data: {typeId: obj},
            async: true,
            success: function (result) {
                var list = result.data
                var tem = JSON.parse(list.brandIds);
                console.log(list)
                if (result.code == 10000) {
                    var str = ""
                    for (var i = 0; i < tem.length; i++) {
                        str += '<option value="' + tem[i].id + '">' + tem[i].text + '</option>'
                    }
                }
                $("#template").html(str)

                var tee = JSON.parse(list.customAttributeItems);
                console.log(tee)
                var tee = JSON.parse(list.customAttributeItems);
                var ser = '';
                for (var j = 0; j < tee.length; j++) {
                    ser += '<tr class="col-md-10 data">'
                    ser += '<td><input type="text" value="' + tee[j].text + '" readonly></td>'
                    ser += '<td><input class="form-control" placeholder="扩展属性"></td>'
                    ser += '</tr>'
                }
                $("#typeTable").html(ser);


                var tre = list.specIds;
                var str1 = '';
                for (var k = 0; k < tre.length; k++) {
                    console.log(tre[k])
                    str1 +='<tr>'
                    str1 +='<td><input type="text" value="'+tre[k].text+'"></td>'
                    var data = tre[k].optionList
                    for (var t = 0; t <data.length ; t++) {
                        console.log(data[t])
                        str1 += '<td><span><input type="checkbox" value="'+data[t].optionName+'">'+data[t].optionName+'</span></td>'
                    }
                    str1 += '</tr>'
                }
                $("#option_text").html(str1);

            },
            error: function (result) {
                alert("系统错误,请稍后再试");
            }
        })
    }

    function chang1(obj) {
        selectPidd(obj)
    }

    function chang2(obj) {
        selectPiddd(obj)
    }

    function chang3(obj) {
        selectAll(obj)
    }

    function insertAll() {

        var trr = $("#imageBody").find("tr")//-------------itemImages
        var set = []
        for (var j = 0; j <trr.length ; j++) {
            var td =  $(trr[j]).find('td')
            var col =  $(td[0]).find('input').val()
            var ima =  $(td[1]).find('input').val()
            set.push({color:col,url:ima})
        }
        var jsonset = JSON.stringify(set)
        console.log(jsonset)



        var type = $("#typeTable").find("tr")//  -------------拓展属性
        var ss = []
        for (var i = 0; i < type.length; i++) {
            var td =  $(type[i]).find('td')
            var tex =  $(td[0]).find('input').val()
            var ty =  $(td[1]).find('input').val()
            ss.push({text: tex,value:ty})
        }
        var jsonlist = JSON.stringify(ss)
        console.log(jsonlist)


        //规格选择部分
        var trs2 = $("#option_text").find("tr");//-------------规格
        var set2 = []
        for (var j = 0; j <trs2.length ; j++) {
            var td =  $(trs2[j]).find('td')
            var text =  $(td[0]).find('input').val()
            var set3 = []
            for (var i = 1; i < td.length; i++) {
                set3.push($(td[i]).find('input').val())
            }
            set2.push({attributeName:text,attributeValue:set3})
        }
        var jsonset1 = JSON.stringify(set2)
        console.log(jsonset1)



        $.ajax({
             url: "/seller/insertAll?category3Id="+$("#tree").val(),
             type: "post",
             dataType: "json",
             data: $("#productId").serialize()+"&customAttributeItems="+jsonlist+"&itemImages="+jsonset+"&specificationItems="+jsonset1,
             async: true,
             success: function (result) {
                 if (result.code == 10000) {
                     alert("增加成功")
                 }
             },
             error: function (result) {
                 alert("系统错误,请稍后再试");
             }
         })
    }

    function upload() {
        $('#testfile').fileinput({
            language: 'zh',
            uploadUrl: '/seller/upload',
            maxFileCount: 3,
            allowedFileExtensions: ['jpg', 'gif', 'png'],
            maxFileSize: 1024,
            enctype: 'multipart/form-data'
        });
    }


</script>
<body class="hold-transition skin-red sidebar-mini">
<input type="text" id="getId">
第三级目录 : <input type="text" id="tree">


<!-- 正文区域 -->
<section class="content">

    <div class="box-body">

        <!--tab页-->
        <div class="nav-tabs-custom">

            <!--tab头-->
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#home" data-toggle="tab">商品基本信息</a>
                </li>
                <li>
                    <a href="#pic_upload" data-toggle="tab">商品图片</a>
                </li>
                <li>
                    <a href="#customAttribute" data-toggle="tab">扩展属性</a>
                </li>
                <li>
                    <a href="#spec" data-toggle="tab">规格</a>
                </li>
            </ul>
            <!--tab头/-->
            <form id="productId">
                <!--tab内容-->
                <div class="tab-content">

                    <!--表单内容-->
                    <div class="tab-pane active" id="home">
                        <div class="row data-type">
                            <div class="col-md-2 title">商品分类</div>

                            <div class="col-md-10 data">
                                <table>
                                    <tr>
                                        <td>
                                            <select id="one" class="form-control" onchange="chang1(this.value)"
                                                    name="category1Id">

                                            </select>
                                        </td>
                                        <td>
                                            <select id="two" class="form-control select-sm"
                                                    onchange="chang2(this.value)" name="category2Id">

                                            </select>
                                        </td>
                                        <td>
                                            <select id="three" class="form-control select-sm"
                                                    onchange="chang3(this.value)">

                                            </select>
                                        </td>
                                        <td>
                                            模板ID:<input id="four" name="typeTemplateId">

                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-2 title">商品名称</div>
                            <div class="col-md-10 data">

                                <input type="text" class="form-control" placeholder="商品名称" name="goodsName">
                            </div>

                            <div class="col-md-2 title">品牌</div>
                            <div class="col-md-10 data">
                                <select class="form-control" id="template" name="brandId">

                                </select>
                            </div>
                            <div class="col-md-2 title">副标题</div>
                            <div class="col-md-10 data">
                                <input type="text" class="form-control" name="caption" placeholder="副标题">
                            </div>
                            <div class="col-md-2 title">价格</div>
                            <div class="col-md-10 data">
                                <div class="input-group">
                                    <span class="input-group-addon">¥</span>
                                    <input type="text" class="form-control" name="price" placeholder="价格">
                                </div>
                            </div>
                            <div class="col-md-2 title editer">商品介绍</div>
                            <div class="col-md-10 data editer">
                                <textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea>
                            </div>
                            <div class="col-md-2 title rowHeight2x">包装列表</div>
                            <div class="col-md-10 data rowHeight2x">
                                <textarea rows="4" class="form-control" name="packageList"
                                          placeholder="包装列表"></textarea>
                            </div>
                            <div class="col-md-2 title rowHeight2x">售后服务</div>
                            <div class="col-md-10 data rowHeight2x">
                                <textarea rows="4" class="form-control" name="saleService"
                                          placeholder="售后服务"></textarea>
                            </div>
                        </div>
                    </div>


                    <!--图片上传-->
                    <div class="tab-pane" id="pic_upload">
                        <div class="row data-type">
                            <!-- 颜色图片 -->
                            <div class="btn-group">
                                <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"
                                        data-toggle="modal"><i class="fa fa-file-o"></i> 新建
                                </button>

                            </div>

                            <table class="table table-bordered table-striped table-hover dataTable">
                                <thead>
                                <tr>
                                    <th class="sorting">颜色</th>
                                    <th class="sorting">图片</th>
                                    <th class="sorting">操作</th>
                                </thead>
                                <tbody id="imageBody">

                                </tbody>
                            </table>

                        </div>
                    </div>


                    <!--扩展属性-->
                    <div class="tab-pane" id="customAttribute">
                        <table class="row data-type" id="typeTable">

                        </table>
                    </div>

                    <!--规格-->
                    <div class="tab-pane" id="spec">
                        <div class="row data-type">
                            <div class="col-md-2 title">是否启用规格</div>
                            <div class="col-md-10 data">
                                <input type="checkbox">
                            </div>
                        </div>
                        <p>

                        <div>
                        <div class="row data-type" id="option_text">

                        </div>
                        <div class="row data-type">
                                <table class="table table-bordered table-striped table-hover dataTable">
                                    <thead>
                                    <tr>
                                        <th class="sorting">屏幕尺寸</th>
                                        <th class="sorting">网络制式</th>
                                        <th class="sorting">价格</th>
                                        <th class="sorting">库存</th>
                                        <th class="sorting">是否启用</th>
                                        <th class="sorting">是否默认</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>
                                            4.0
                                        </td>
                                        <td>
                                            3G
                                        </td>
                                        <td>
                                            <input class="form-control" placeholder="价格">
                                        </td>
                                        <td>
                                            <input class="form-control" placeholder="库存数量">
                                        </td>
                                        <td>
                                            <input type="checkbox">
                                        </td>
                                        <td>
                                            <input type="checkbox">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            4.0
                                        </td>
                                        <td>
                                            4G
                                        </td>
                                        <td>
                                            <input class="form-control" placeholder="价格">
                                        </td>
                                        <td>
                                            <input class="form-control" placeholder="库存数量">
                                        </td>
                                        <td>
                                            <input type="checkbox">
                                        </td>
                                        <td>
                                            <input type="checkbox">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            5.0
                                        </td>
                                        <td>
                                            3G
                                        </td>
                                        <td>
                                            <input class="form-control" placeholder="价格">
                                        </td>
                                        <td>
                                            <input class="form-control" placeholder="库存数量">
                                        </td>
                                        <td>
                                            <input type="checkbox">
                                        </td>
                                        <td>
                                            <input type="checkbox">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            5.0
                                        </td>
                                        <td>
                                            4G
                                        </td>
                                        <td>
                                            <input class="form-control" placeholder="价格">
                                        </td>
                                        <td>
                                            <input class="form-control" placeholder="库存数量">
                                        </td>
                                        <td>
                                            <input type="checkbox">
                                        </td>
                                        <td>
                                            <input type="checkbox">
                                        </td>
                                    </tr>

                                    </tbody>
                                </table>

                            </div>

                        </div>

                    </div>
                </div>


            </form>
        <!--tab内容/-->
        <!--表单内容/-->

    </div>


    </div>
    <div class="btn-toolbar list-toolbar">
        <button class="btn btn-primary" onclick="insertAll()"><i class="fa fa-save"></i>保存</button>
        <button class="btn btn-default">返回列表</button>
    </div>

</section>


<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">上传商品图片</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped">
                    <tr>
                        <td>颜色</td>
                        <td><input class="form-control" placeholder="颜色" name="color"></td>
                    </tr>
                    <tr>
                        <td>商品图片</td>
                        <td>
                            <table>
                                <tr>
                                    <td>
                                        <input type="file" id="testfile" name="myFile" multiple/>
                                        <input type="text" name="newsImg">
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="BaoCun()">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

<script>
    function BaoCun(){
        var color = $("[name=color]").val()
        var url = $("[name=newsImg]").val()
        console.log(url)


        var str = '';
        str += '<tr>'
        str += '<td>'
        str += '<input type="text" name="color" value="'+color+'">'
        str += '</td>'
        str += '<td>'
        str += '<input type="text" name="image" value="'+url+'">'
        str += '</td>'
        str += '<td>'
        str += '<img alt="" src="'+url+'" width="100px" height="100px">'
        str += '</td>'
        str += '<td>'
        str += '<button type="button" class="btn btn-default" title="删除"><i  class="fa fa-trash-o"></i>删除</button>'
        str += '</td>'
        str += '</tr>'
        $("#imageBody").append(str)


    }
</script>

<!-- 正文区域 /-->
<script type="text/javascript">

    var editor;
    KindEditor.ready(function (K) {
        editor = K.create('textarea[name="content"]', {
            allowFileManager: true
        });
    });

</script>

</body>

</html>